<template>
	<view class="connect">
		<u-navbar back-text=" " :title="title"></u-navbar>
		
		<view class="form_item">
			<view class="shop_box">
				<u-image border-radius="8" width="112rpx" height="112rpx" :src="info.pic"></u-image>
				<view class="shop_box_right">
					<view v-if="info.status>1" class="shop_box_right_item" >
						<view class="item_title ">
							<view class="item_title_left">
								单号：
							</view>
							<view class="item_mask">{{info.code?info.code:'-'}}</view>
							<image @click="copy(info.code)" style="width: 24rpx; height: 24rpx;margin-left: 16rpx;" src="../../static/icon/coppy.png" mode=""></image>
						</view>
					</view>
					<view class="shop_box_right_item">
						<view class="item_title " >
							<view class="item_title_left" >
								物流单号：
							</view>
							<view class="item_mask">{{info.express_code?info.express_code:'-'}}</view>
							<image v-if="info.express_code" @click="copy(info.express_code)" style="width: 24rpx; height: 24rpx;margin-left: 16rpx;" src="../../static/icon/coppy.png" mode=""></image>
						</view>
						
					</view>
					<view class="shop_box_right_item">
						<view class="item_title">
							<view class="item_title_left">
								重量：
							</view>
							<view class="item_mask">{{info.weight?info.weight:'-'}}</view>
						</view>
						
					</view>
					<view class="shop_box_right_item">
						<view class="item_title">
							<view class="item_title_left">
								价格：
							</view>
							<view class="item_mask">{{info.price?info.price:'-'}}</view>
						</view>
						
						<u-button v-if="info.status==1" @click="navTo('/pages/complete/complete_zh?type='+type+'&id='+info.id)" :custom-style="{background:'#83b9ff',color:'#fff'}" ripple size="mini" type="primary">完善信息</u-button>
					</view>
				</view>
			</view>
			
			<view class="form_item_title">包裹信息</view>
			<view class="form_item_info">
				<view v-if="info.status<2" class="form_item_info_input">
					<view >
						<span>快递单号</span>
					</view>
					<view  class="form_input_all" style="color: #808080;">{{info.code}}</view>
					<!-- <input disabled class="form_input"  v-model="info.code"  placeholder="请输入快递单号" /> -->
				</view>
				<view  class="form_item_info_input" style="border: none;">
					<view>
						<span>仓库所在区</span>
					</view>
					<text  class="form_input" style="color: #808080;">{{addressType}}</text>
					<image style="width: 21rpx;height: 12rpx; margin-left: 22rpx;" src="https://www.mengkahuyu.com/index_png/back.png" mode="widthFix" alt="" />
				</view>
				<!-- <view v-if="info.status>1 && info.status!=10" class="form_item_info_input" style="border: none;">
					<view>
						<span>申报总价</span>
					</view>
					<text  class="form_input" style="color: #808080;">{{info.amount?info.amount:'-'}}</text>
				</view> -->
				<view v-if="info.status>1 && info.status!=10" class="form_item_info_input" style="border: none;">
					<view>
						<span>邮寄地址</span>
					</view>
					<text  class="form_input" style="color: #808080;">{{info.province?info.province+info.city+info.area:'-'}}</text>
				</view>
				<view v-if="info.status>1 && info.status!=10" class="form_item_info_input" style="border: none;">
					<view>
						<span>详细地址</span>
					</view>
					<text  class="form_input" style="color: #808080;">{{info.address?info.address:'-'}}</text>
				</view>
				<view v-if="info.status>1 && info.status!=10" class="form_item_info_input" style="border: none;">
					<view>
						<span>收件人姓名</span>
					</view>
					<text  class="form_input" style="color: #808080;">{{info.name}}</text>
				</view>
				<view v-if="info.status>1 && info.status!=10" class="form_item_info_input" style="border: none;">
					<view>
						<span>收件人电话</span>
					</view>
					<text  class="form_input" style="color: #808080;">{{info.phone}}</text>
				</view>
				<view v-if="info.status>1 && info.status!=10" class="form_item_info_input" style="border: none;">
					<view>
						<span>通关方式</span>
					</view>
					<text v-if="info.clearance_type==1" class="form_input" style="color: #808080;">个人通关码</text>
					<text v-if="info.clearance_type==2" class="form_input" style="color: #808080;">韩国登入证</text>
					<text v-if="info.clearance_type==3" class="form_input" style="color: #808080;">个人护照</text>
					<text v-if="info.clearance_type==4" class="form_input" style="color: #808080;">EMS通关</text>
				</view>
				<view v-if="info.status>1 && info.status!=10" class="form_item_info_input" style="border: none;">
					<view>
						<span>通关码</span>
					</view>
					<text  class="form_input" style="color: #808080;">{{info.idcode}}</text>
				</view>
				<view v-if="info.status>1 && info.status!=10" class="form_item_info_input_o" style="border: none;">
					<view>
						<span>备注</span>
					</view>
					<text  class="form_inputtext" style="color: #808080;">{{info.remark}}</text>
				</view>
				
				
			</view>
		</view>	
		<view v-if="info.status<2 || info.status==10" class="form_item">
			<view class="form_item_title">物品信息</view>
			<view v-for="(item,index) in info_list" :key="index" class="form_item_info" style="margin-bottom: 16rpx;">
				<view class="form_item_info_input" >
					<view>
						<span>中文品名</span>
					</view>	
					<input disabled class="form_input" v-model="info_list[index].name" type="text" placeholder="请输入中文品名" />
					<!-- <image style="width: 21rpx;margin-left: 22rpx;" src="https://www.mengkahuyu.com/index_png/back.png" mode="widthFix" alt="" /> -->
				</view>
				<view class="form_item_info_input">
					<view>
						<span>单价</span>
					</view>
					<input disabled v-model="info_list[index].price" class="form_input" type="number" placeholder="请输入单价" />
				</view>
				<view class="form_item_info_input">
					<view>
						<span>数量</span>
					</view>
					<input disabled v-model="info_list[index].num" class="form_input" type="number" placeholder="请输入数量" />
				</view>
				
			</view>
			
			
		</view>
		<view v-if="info.status>1 && info.status!=10" class="form_item">
			<view class="form_item_title">物品信息</view>
			<view v-for="(item,index) in info.brand" :key="index" class="form_item_info" style="margin-bottom: 16rpx;">
				
				<view class="form_item_info_input">
					<view>
						<span>商品名</span>
					</view>
					<input disabled class="form_input" v-model="item.name" type="text" placeholder="请输入团名品牌" />
					<!-- <input disabled v-model="item.brand_type_name" class="form_input" type="number" placeholder="请输入商品名" /> -->
				</view>
				<view class="form_item_info_input">
					<view>
						<span>数量</span>
					</view>
					<input disabled v-model="item.num" class="form_input" type="number" placeholder="请输入数量" />
				</view>
				
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'包裹详情',
				order_id:0,
				id:0,
				pop_show:false,
				list:[
					{text:'韩国仓库' , type:1},
					{text:'日本仓库' , type:2},
				],
				addressType:'请选择',//仓库国家
				info_list:[
					{
						"name": null, //名称
						"price": null, //价格
						"num": null //数量
					},
				],
				info:{
					"code": null, //快递单号
					"type": null, //1韩国 2日本
					"item_info": [], //物品信息	
					"remark": null,
					"sid": null //增值服务id
				},
			}
		},
		onLoad(parame) {
			// console.log(parame , '页面传参')
			if(parame.id){
				this.id = parame.id
				this.title = '包裹认领'
			}
			if(parame.order_id){
				this.order_id = parame.order_id
				// console.log(this.order_id )
				this.title = '包裹详情'
			}
		},
		onShow(){
			this.getInfo()
		},
		methods: {
			copy(text){
				uni.setClipboardData({
					data: text,
					success: function(t) {
						uni.showToast({
						    title: '复制成功',
						    //将值设置为 success 或者直接不用写icon这个参数
						    icon: 'none',
						    //显示持续时间为 2秒
						    duration: 2000
						})
					}
				});
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			getInfo(){
				// 获取包裹闲情
				var data = {
					id:this.order_id
				}
				this.$wqzApi.kor_Order_detail(data).then(res=>{
					this.info = res.data
					this.info_list = res.data.brand
					this.type = 2
					this.addressType = "中国威海仓库"
				})
			},
			onSubmit(type){
				// type 1新增 2认领
				var radioArr = []
				var that = this
				var isOk = true //是否将物品信息全部完善
				this.radioList.forEach((item,index)=>{
					if(item.isChoose){
						radioArr.push(item.id)
					}
				})
				this.info.sid = radioArr.join(',') //选中的增值服务
				this.info.item_info = this.info_list
				this.info.item_info.forEach((item,index)=>{
					for(var key in item){
						if(!item[key]){
							isOk = false
						}
					}
				})
				if(!this.info.code){
					uni.showToast({
						title:"请输入快递单号",
						icon:'none'
					})
					return
				}
				if(!this.info.type){
					uni.showToast({
						title:"请选择仓库所在地",
						icon:'none'
					})
					return
				}
				if(this.info.item_info.length<1){
					uni.showToast({
						title:"物品信息不能为空",
						icon:'none'
					})
					return
				}
				if(!isOk){
					uni.showToast({
						title:"请完善物品信息",
						icon:'none'
					})
					return
				}
				if(type==1){
					this.$wqzApi.Order_order_add(this.info).then(res=>{
						uni.showToast({
							title:'预报成功'
						})
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
					// 新增	
				}
				if(type==2){
					// 修改预报订单
					uni.showModal({
						title: '提示',//标题
						content: "确认修改",//提示内容可以加入\r\n进行换行
						showCancel: true,//是否显示取消按钮，默认为true
						cancelText: '取消',//取消按钮的文字
						confirmText: '确定',//确认按钮的文字
						success: res => {
							if (res.confirm) { //点击确定之后执行的代码
								that.$wqzApi.Order_order_add(that.info).then(res=>{
									uni.showToast({
										title:'修改成功'
									})
								})
								setTimeout(()=>{
									uni.navigateBack()
								},1500)
							}
						},
						fail: () => {},
						complete: () => {}
					});
					
					
				}
				// console.log(type)
			},
		
			openPop(){
				this.pop_show = true
				
			},
			onchange(e){
				this.info.type = this.list[e].type
				this.addressType = this.list[e].text
			},
			addInfo(){
				var data = {
					"name": null, //名称
					"price": null, //价格
					"num": null //数量
				}
				this.info_list.push(data)
			},
			delInfo(index){
				this.info_list.splice(index , 1)
			},
			chooseRadio(key){
				this.radioList.forEach((item,index)=>{
					if(index==key){
						this.radioList[index].isChoose = !this.radioList[index].isChoose 
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url(./index.scss);
</style>
